<template>
  <div class="customers container">
    <Alert v-if="alert"  v-bind:message="alert"></Alert>
    <h1 class="page-header">用户管理系统</h1>
  
    <input type="text" class="form-control" placeholder="搜索" v-model="search_val" @keyup.enter="searchUser">
    <br>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>邮箱</th>
          <!-- <th>学历</th>
          <th>毕业学校</th>
          <th>职业</th>
          <th>描述</th> -->
        </tr>
      </thead>

      <tbody>
        <tr v-for="customer in customers" :key="customer._id">
          <td>{{customer.name}}</td>
          <td>{{customer.tell}}</td>
          <td>{{customer.email}}</td>
          <!-- <td>{{customer.educational}}</td>
          <td>{{customer.school}}</td>
          <td>{{customer.profession}}</td>
          <td>{{customer.describe}}</td> -->
          <td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer._id">详情</router-link></td>
        </tr>
      </tbody>

    </table>
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'customers',
  data () {
    return {
      customers:[],
      alert:"",
      search_val:""
    }
  },
  methods:{
    getCustomers(){
      this.$http.get("/users/getusers").then(res => {
        if(res.data.code === 200){
          this.customers = res.data.data;
        }
		  }).catch(err => {
			  throw err
		  })
    },
    searchUser:function(){
      let params = {
        name:this.search_val
      }
      this.$http.get("/users/search",params).then(res => {
        if(res.data.code === 200){
          // console.log(res.data.data)
          this.customers = res.data.data;
        }
		  }).catch(err => {
			  throw err
		  })
    }
  },

  created(){
    if (this.$route.query.alert) {
      this.alert = this.$route.query.alert;
    }
    this.getCustomers();
  },

  components:{
    Alert
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
